<template>
  <div class="task-main">
    <div class="task-list">
<!--      <div class="task view-box" v-for="task in tasks" :key="task.id">-->
<!--        <div class="info flex-box">-->
<!--          <div>-->
<!--            <div class="title">{{task.title}}</div>-->
<!--            <div class="time">起止时间：{{task.startTime}} ~ {{task.endTime}}</div>-->
<!--            <div class="status">状态：{{task.status | status}}</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div class="progress"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="list">-->
<!--          <div class="course list-item" v-for="course in task.list" :key="course.id">-->
<!--            <div class="flex-box">-->
<!--              <div class="cover img-box">-->
<!--                <img :src="course.cover" alt="cover">-->
<!--              </div>-->
<!--              <div class="info flex-box">-->
<!--                <div class="title">{{course.title}}</div>-->
<!--                <div class="status">-->
<!--                  <span>共{{course.sectionNum}}节 | 已学{{course.learnedNum}}节 学完{{course.learnedNum/course.sectionNum | percent}}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="learn-btn">立即学习</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "EESelfTaskView",
  data() {
    return {
      tasks: [
        {
          id: 100,
          title: 'Java基础知识',
          startTime: '2022-4-12',
          endTime: '2022-5-3',
          status: 1,
          progress: 12,
          list: [
            {
              id: 10,
              cover: 'https://cdn.pixabay.com/photo/2022/03/24/19/57/sheep-7089786__340.jpg',
              title: 'web前端开发',
              teacherName: '林冲',
              teacherTitle: '豹子头',
              sectionNum: 56,
              learnedNum: 13
            }
          ]
        },
        {
          id: 101,
          title: 'Java基础知识',
          startTime: '2022-4-12',
          endTime: '2022-5-3',
          status: 1,
          progress: 12,
          list: [
            {
              id: 10,
              cover: 'https://cdn.pixabay.com/photo/2022/03/24/19/57/sheep-7089786__340.jpg',
              title: 'web前端开发',
              teacherName: '林冲',
              teacherTitle: '豹子头',
              sectionNum: 56,
              learnedNum: 13
            }
          ]
        }
      ]
    }
  },
  filters: {
    percent(n) {
      return parseInt(n*100+'')+'%';
    },
    status(s) {
      switch (s) {
        case 0: return '未完成'
        case 1: return '已完成'
        default: return '未知'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.task {
  padding: 20px;
  margin-bottom: 20px;
}
.info {
  justify-content: space-between;
  margin-bottom: 50px;
  font-size: 14px;
  .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .time {
    margin-bottom: 5px;
  }
}

.course {
  position: relative;
  margin: 20px 0;
  .cover {
    width: 187px;
    height: 103px;
    margin-right: 10px;
  }
  .info {
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
  }
  .title {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .status {
    color: #888;
  }
  .learn-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background: #619DFF;

    line-height: 40px;
    color: white;
    text-align: center;
  }
}
</style>
